<script setup>
import topHeaderChina from '../TopHeader/topHeaderChina.vue';
import chargingPointsCityChina from '../charts/chargingPointsCityChina.vue';
import DcAc from '../charts/DcAc.vue';
import ChinaCities from '../charts/ChinaCities.vue';
import ChinaSaleRanking from '../charts/ChinaSaleRanking.vue';
import soldBody from '../charts/soldBody.vue';
import SoldEv from '../charts/SoldEv.vue';
import makeCountryWorld from '../charts/makeCountryWorld.vue';
import ButtonChina from '../button/ButtonChina.vue';
</script>

<template>
    <div class="data-view">
        <dv-full-screen-container>
            <!-- Top Header Section -->
            <div class="top-header">
                <ButtonChina></ButtonChina>
                <topHeaderChina></topHeaderChina>
            </div>

            <!-- Body Section -->
            <div class="row">
                <!-- First Column -->
                <div class="col col-30">
                    <!-- 1st row -->
                    <div class="row firstfirst-row">
                        <div class="col-item">
                            <dv-border-box-13>
                                <DcAc></DcAc>
                            </dv-border-box-13>
                        </div>
                    </div>
                    <!-- 2nd row -->
                    <div class="row firstSecond-row">
                        <div class="col-item">
                            <dv-border-box-12>
                                <ChinaCities></ChinaCities>
                            </dv-border-box-12>
                        </div>
                    </div>
                </div>

                <!-- Second Column -->
                <div class="col col-40">
                    <!-- 1st row (30% height) -->
                    <div class="row first-row">
                        <div class="col-item">
                            <dv-border-box-11 title="新能源汽车的产销量">
                                <ChinaSaleRanking></ChinaSaleRanking>
                            </dv-border-box-11>
                        </div>
                    </div>
                    <!-- 2nd row (70% height) -->
                    <div class="row second-row">
                        <div class="col-item">
                            <dv-border-box-10>
                                <chargingPointsCityChina></chargingPointsCityChina>
                            </dv-border-box-10>
                        </div>
                    </div>
                </div>

                <!-- Third Column -->
                <div class="col col-30">
                    <!-- 1st row -->
                    <div class="row">
                        <div class="col-item">
                            <dv-border-box-13>
                                <makeCountryWorld></makeCountryWorld>
                            </dv-border-box-13>
                        </div>
                    </div>
                    <!-- 2nd row -->
                    <div class="row">
                        <div class="col-item">
                            <dv-border-box-12>
                                <SoldEv></SoldEv>
                            </dv-border-box-12>
                        </div>
                    </div>
                    <!-- 3rd row -->
                    <div class="row">
                        <div class="col-item">
                            <dv-border-box-12>
                                <soldBody></soldBody>
                            </dv-border-box-12>
                        </div>
                    </div>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<style lang="css" scoped>
    /* Overall page styling */
    .data-view {
        width: 100vw;
        height: 100vh;
        background-color: black;
        color: white;
        display: flex;
        flex-direction: column;
    }

    /* Full-screen container styling */
    #dv-full-screen-container {
        background-image: url('@/assets/imgs/bk6.jpg');
        background-size: 100% 100%;
        box-shadow: 0 0 3px blue;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    /* Top Header styling */
    .top-header {
        width: 100%;
        height: 100px;
        background-color: #333; /* Dark background for top header */
    }

    /* Row layout for the entire page */
    .row {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
    }

    /* Column layout for each section */
    .col {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 10px;
        gap: 10px; /* Space between rows in each column */
    }

    .col-30 {
        width: 30%; /* First and third columns take 30% */
    }

    .col-40 {
        width: 40%; /* Second column takes 40% */
    }

    /* Column content */
    .col-item {
        padding: 10px;
        text-align: center;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    /* Specific row height configurations */
    .firstfirst-row {
        height: 40%
    }
    .firstSecond-row {
        height: 57%
    }

    .first-row {
        height: 30%; /* 40% height for first row in first column */
    }

    .second-row {
        height: 70%; /* 60% height for second row in first column */
    }

    /* Ensuring remaining rows have equal height */
    .row > .col-item {
        flex: 1; /* Each item in the row will take equal height */
    }
</style>
